<template>
  <Layout>
    <Content>
      <div class='swipe-wrap'>
        <Swipe :autoplay='15000' class='swipe'>
          <SwipeItem v-for="(v, i) in banner" :key="i">
            <img v-lazy="v" />
          </SwipeItem>
        </Swipe>
      </div>
      <div class="menu">
        <Row>
          <Col :span="8" v-for="(v, i) in menu" :key="i">
            <div class="menu-item-wrap">
              <router-link class="menu-item" :to = "v.to">
                <div class="menu-item-preview">
                  <img v-lazy="v.img" />
                </div>
                <p>{{ v.title }}</p>
              </router-link>
            </div>
          </Col>
        </Row>
      </div>
    </Content>
  </Layout>
</template>

<script>

import { Swipe, SwipeItem, Row, Col } from 'vant'
import Layout from '@/component/layout/index.js'

const { Content } = Layout

export default {

  name: 'index',

  data () {
    return {
      banner: [
        'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        'http://img4.imgtn.bdimg.com/it/u=285542793,690829279&fm=26&gp=0.jpg',
        'http://img5.imgtn.bdimg.com/it/u=921941047,3804246164&fm=26&gp=0.jpg',
      ],
      menu: [{
        title: '日程一览',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '会议介绍',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '视频回顾',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '会议集锦',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '报名参会',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '直播',
        to: '/',
        img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '自定义',
        to: '/',
        // img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '自定义',
        to: '/',
        // img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }, {
        title: '自定义',
        to: '/',
        // img: 'http://img3.imgtn.bdimg.com/it/u=360869140,1895507837&fm=26&gp=0.jpg'
      }]
    }
  },

  components: {
    Swipe,
    SwipeItem,
    Row,
    Col,
    Layout,
    Content,
  }
}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.swipe-wrap {
  position: relative;
  padding-bottom: percentage(208 / 375);
}

.swipe {
  position: absolute;
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  }

  /deep/ .van-swipe-item {
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /deep/ .van-swipe__indicators {
    z-index: 10;
  }

  /deep/ .van-swipe__indicator {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(0,0,0,.6);
    margin-right: 8px;

    &--active {
      background: rgba(255,255,255,.65);
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.menu {
  padding-top: 15px;
  padding-bottom: 15px;

  &-item-wrap {
   position: relative;
   padding-bottom: 100%; 
  }

  /deep/ .van-col {
    &:nth-child(1n) .menu-item-preview { background-color: #EA952B; }
    &:nth-child(2n) .menu-item-preview { background-color: #4CA5E9; }
    &:nth-child(3n) .menu-item-preview { background-color: #0DB78A; }
    &:nth-child(4n) .menu-item-preview { background-color: #A671CD; }
    &:nth-child(5n) .menu-item-preview { background-color: #0CB78A; }
    &:nth-child(6n) .menu-item-preview { background-color: #CD5556; }
    &:nth-child(7n) .menu-item-preview { background-color: #4CA5E9; }
    &:nth-child(8n) .menu-item-preview { background-color: #0CB78A; }
    &:nth-child(9n) .menu-item-preview { background-color: #EA62A1; }
  }

  &-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    color: inherit;
    min-width: 0;
    transition: background-color .2;

    &.active,
    &:active {
      background-color: #eee;
    }

    &-preview {
      width: 70px;
      height: 70px;
      border-radius: 35px;
      border: 3px solid #fff;
      background-color: #ddd;
      overflow: hidden;
      margin-bottom: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }


    p {
      font-size: 15px;
      color: #262626;
      margin: 0;
      width: 100%;
      text-align: center;
      padding: 0 10px;

      .text-overflow();
    }
  }
}

</style>